<template>
	<view class="content">
		<view style="height: 1rpx;"></view>
		<!-- 职位名称 -->
		<job-name :type="1" :detailData="detailData"></job-name>
		<!-- 目前进展 -->
		<job-progress-present :status="status"></job-progress-present>
		<!-- 相似推荐 -->
		<view class="img">
			<image src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Group234@2x.png" mode="scaleToFill"></image>
		</view>
		
		<job-card v-for="(item,index) in detailData.recommends" :key="index" :jobInfo="item"></job-card>
		
		<!-- 评价弹出层 -->
		<view class="">
			<u-popup :show="popupShow" :round="10" mode="bottom" @close="popupShow=false" 
			:closeable='true'>
				<view class="commentPopup">
					<span>评价</span>
					<view class="star">
						<view class="starChild" v-for="item,index in starList" :key="index"
						@click="starClick(index)">
							<image v-if="item===false" src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Star3@2x.png" alt="" mode="scaleToFill"></image>
							<image v-if="item===true" src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Star2@2x.png" alt="" mode="scaleToFill"></image>
						</view>
					</view>
					<textarea v-model="commentText" cols="30" rows="10" maxlength="150"
					placeholder="你的评价将展示在商家的公司主页,为其他求职者提供重要的参考(限150字)"
					></textarea>
					<span v-if="!alipay">{{commentText.length}}/150</span>
					<view class="img">
						<view class="img2" v-for="item,index in imgList" :key="index">
							<image :src="item" mode="scaleToFill"></image>
							<image id="del" @click="deleteImg(index)" 
							src="/static/img/close@2x.png" alt="" mode="scaleToFill"></image>
						</view>
						<image  src="@/subpageA/static/img/my_slices/jobProgress/subsetion/addPic@2x.png" 
						alt="" @click="uploadImg" mode="scaleToFill"></image>
						<span>（最多上传3张）</span>
					</view>
					<button>提交</button>
				</view>
			</u-popup>
		</view>
		
		
		
		<!-- 底部 -->
		<view class="bottom" v-if="status===4">
			<button class="comment" @click="popupShow=true">评价职位</button>
			<button class="contact">联系商家</button>
		</view>
		<view class="bottom" v-else>
			<button class="contact" style="width: 686rpx;">联系商家</button>
		</view>
		
		
		
	</view>
</template>

<script>
	import jobName from '@/subpageA/components/jobName.vue'
	import jobProgressPresent from '@/subpageA/components/jobProgressPresent.vue'
	import jobCard from '@/components/jobCard.vue'
	
	export default {
		
		data() {
			return {
				data: {},
				alipay:false,
				
				recommendJobList:[1,1,1],
				status: '',
				
				
				popupShow:false			,//弹出层是否展示
				starList:[false,false,false,false,false],	//评价星级
				imgList:[],				//评价图片
				commentText:'',
				detailData: {},
			}
		},
		components:{
			jobName,
			jobProgressPresent,
			jobCard
		},
		onLoad(options) {
			this.data=JSON.parse(options.data);
			
			
			
			//#ifdef MP-ALIPAY
			this.alipay=true;
			//#endif
		},
		onShow() {
			//职位进展状态：可报名-0 待录取-1，通过初筛-2，已录取-3，已拒绝-4，已结算-5，已完成-6， 已取消-7
			
			this.$store.dispatch('initDic').then(()=>{
				this.$http.request({
					url:'/user/enrollDetail',
					data:{
						pid:this.data.postId,
						enrId:this.data.enrollId
					}
				}).then((result)=>{
					let res=result.data
					console.log('响应结果',res);
					this.detailData = res.data
					this.status = String(res.data.status)
					uni.setNavigationBarTitle({
						title: res.data.statusDesc
					})
				})
			})
		},
		methods: {
			//选择评价星级
			starClick(index){
				for(let i=0;i<this.starList.length;i++){
					if(i<=index){
						this.starList[i]=true;
					}else{
						this.starList[i]=false;
					}
				}
				this.starList.splice(index,1,true)		//调用数组API使数组响应更新
				//console.log(this.starList);
			},
			// 上传评价图片
			uploadImg(){
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: res=> {
						console.log(res);
						if (res.tempFilePaths.length != 0&&this.imgList.length<=2) {
							this.imgList.push(...res.tempFilePaths);
						}else if(this.imgList.length>2){
							uni.showToast({
								title: '最多上传3张图片',
								duration: 1500,
								icon:"none"
							});
						}
					}
				});
			},
			//删除评价图片
			deleteImg(index){
				this.imgList.splice(index,1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		background-color: #F3F7F8;
		padding-bottom: 160rpx;
		
		.img{
			margin: 64rpx 0 32rpx;
			width: 100%;
			text-align: center;
			>image{
				width: 424rpx;
				height: 44rpx;
			}
		}
		
		.commentPopup{
			display: flex;
			flex-direction: column;
			align-items: center;
			
			>span:nth-of-type(1){
				display: block;
				margin: 32rpx;
				font-size: 40rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			
			.star{
				display: flex;
				
				.starChild{
					margin: 20rpx;
					image{
						width: 64rpx;
						height: 64rpx;
					}
				}
			}
			>span:nth-of-type(2){
				position: absolute;
				top:444rpx;
				right: 64rpx;
				font-size: 24rpx;
			}
			textarea{
				width: 622rpx;
				height: 148rpx;
				margin: 32rpx 32rpx 0;
				
				background: #F3F7F8;
				border-radius: 16rpx 16rpx 0 0;
				padding: 32rpx;
				
				.textarea-placeholder{
					font-size: 24rpx;
				}
			}
			
			
			
			.img{
				display: flex;
				justify-content: flex-end;
				width: 686rpx;
				height: 120rpx;
				margin: 0 32rpx;
				background: #F3F7F8;
				border-radius: 0 0 16rpx 16rpx;
				margin-bottom: 20rpx;
				font-size: 18rpx;
				
				span{
					display: block;
					margin-top: 40rpx;
				}
				image{
					width: 80rpx;
					height: 80rpx;
					margin-left: 32rpx;
				}
				
				.img2{
					position: relative;
					#del{
						position: absolute;
						right: -24rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
				
			}
			
			>button{
				display: flex;
				justify-content: center;
				align-items: center;
				width:686rpx;
				height: 96rpx;
				margin-bottom: 32rpx;
				background: #08C8BD;
				border-radius: 16rpx;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
			
			
		}
		
		
		.bottom{
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.0400);
			
			.comment{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				width: 260rpx;
				height: 96rpx;
				background: #F3F7F8;
				border-radius: 16rpx;
				font-size: 16px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;
			}
			
			.contact{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 406rpx;
				height: 96rpx;
				background: #08C8BD;
				border-radius: 16rpx;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		
	}
</style>
